<template>
    <rx-dialog  :showcancel="false" :showok="false">
        <rx-layout>
            <div slot="center">
                <a-alert
                    message="注意：流水线名称在Jenkins中不能重复，保存后将无法再修改，只允许删除后重新新增，请确认好信息无误再保存。"
                    type="info"
                    show-icon
                />
                <div style="margin:10px 0px 10px">
                    <template v-if="isNew">
                        <a-button type="primary" @click="save">保存</a-button>
                    </template>
                    <template v-else>
                        <a-button style="margin-right: 5px;" v-if="mdl.pkId" type="primary" @click="runJenkins">运行流水线</a-button>
                        <a-button  style="margin-right: 5px;" v-if="mdl.pkId" type="primary" @click="showJobDetails">查看流水线日志</a-button>
                        <a-button type="danger"  v-if="mdl.pkId" @click="delById">删除</a-button>
                    </template>
                </div>
                <a-form-model layout="vertical" ref="form"  :model="mdl" :rules="rules" >
                    <a-form-model-item  label="Git连接器" prop = "gitId">
                        <rx-input-button :class="!isNew?'rx-input-butn-disabled':''" v-model="gitConnector" @click="selectGit" @change="gitChange" :disabled="!isNew" :showClose="isNew"></rx-input-button>
                    </a-form-model-item>
                    <a-form-model-item  label="分支" prop = "gitBranch">
                        <a-input placeholder="请输入分支" v-model="mdl.gitBranch" :disabled="!isNew"/>
                    </a-form-model-item>
                    <a-form-model-item  label="jenkins连接器" prop = "jenkinsId">
                        <rx-input-button :class="!isNew?'rx-input-butn-disabled':''" v-model="jenkinsConnector" @click="selectJenkins" :disabled="!isNew" :showClose="isNew"> </rx-input-button>
                    </a-form-model-item>
                    <a-form-model-item  label="流水线名称" prop = "jobName">
                        <a-input placeholder="请输入流水线名称" v-model="mdl.jobName" :disabled="true"/>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
/**
 * 应用devOps管理
 */
import {Util,RxDialog,RxLayout} from '@lowcode/jpaas-common-lib';
import SysDevOpsManageApi from "@/api/system/core/sysDevOpsManage.js";
import SysJenkinsDialog from "@/views/modules/system/core/dialog/SysJenkinsDialog";
import SysJenkinsApi from "@/api/system/core/sysJenkins";
import SysPipelineDetails from "@/views/modules/system/core/SysPipelineDetails";
import SysGitManageEdit from "@/views/modules/system/core/SysGitManageEdit";
import SysGitManageApi from "@/api/system/core/sysGitManage";

export default {
    name: "AppDevOpsManage",
    props:["layerid","destroy","app"],
    components: {
        RxDialog,
        RxLayout,
    },
    data() {
        return {
            isNew:true,
            defaultMdl:{
                gitId:"",
                gitName:"",
                gitBranch:"master",
                jenkinsId:"",
                jenkinsName:"",
                jobName:"",
                appId:"",
            },
            mdl:{},
            gitConnector:"",
            jenkinsConnector:"",
            rules: {
                gitBranch: [{ required:true,message: "请输入分支", trigger: 'change' }],
                jenkinsId: [{ required:true,message: "请选择jenkins连接器", trigger: 'change' }],
                gitId: [{ required:true,message: "请选择Git连接器", trigger: 'change' }],
                jobName: [{ required:false,message: "请输入流水线名称", trigger: 'change' }],
            },
        }
    },
    created() {
        this.getAppDevOps();
    },
    methods: {
        cleanData(){
            this.isNew=true;
            this.gitConnector="";
            this.jenkinsConnector="";
            this.mdl = Util.deepClone(this.defaultMdl);
            this.getGitByApp();
        },
        getAppDevOps(){
            SysDevOpsManageApi.getAppDevOps(this.app.appId).then(res=>{
                if(!res){
                   this.cleanData();
                    return;
                }
                this.isNew=false;
                this.mdl = res;
                if(this.mdl.gitId){
                    this.gitConnector=JSON.stringify({
                        text:this.mdl.gitName,
                        value:this.mdl.gitId
                    })
                }
                if(this.mdl.jenkinsId){
                    this.jenkinsConnector=JSON.stringify({
                        text:this.mdl.jenkinsName,
                        value:this.mdl.jenkinsId
                    })
                }
            });
        },
        getGitByApp(){
            SysGitManageApi.getByAppId(this.app.appId).then(res=>{
                if (res && res.success && res.data) {
                    this.mdl.gitId =res.data.id;
                    this.mdl.gitName = res.data.url;
                    this.gitConnector=JSON.stringify({
                        text:this.mdl.gitName,
                        value:this.mdl.gitId
                    })
                }
            });
        },
        selectGit(vm){
            let self = this;
            Util.open({
                component: SysGitManageEdit,
                curVm: this,
                data:{
                    isDialog:true,
                    appId:self.app.appId
                },
                widthHeight: ['1100px', '620px'],
                title: "Git连接器",
            }, function (action) {
                if (action != "ok") {
                    return;
                }
                let obj ={
                    text:this.resultData.url,
                    value:this.resultData.id
                }
                self.mdl.gitId =obj.value;
                self.mdl.gitName = obj.text;
                self.gitConnector = JSON.stringify(obj)
                vm.setVal(obj.value, obj.text);
            });
        },
        gitChange(val){
            if(!val){
                this.mdl.gitId ="";
                this.mdl.gitName = "";
                this.mdl.jobName = "";
            }
        },
        selectJenkins(vm){
            let self = this;
            Util.open({
                component: SysJenkinsDialog,
                curVm: this,
                widthHeight: ['1100px', '620px'],
                title: "Jenkins连接器",
            }, function (action,data) {
                if (action != "ok") {
                    return;
                }
                let obj ={
                    text:data.name,
                    value:data.id
                }
                self.mdl.jenkinsId =obj.value;
                self.mdl.jenkinsName = obj.text;
                self.jenkinsConnector = JSON.stringify(obj)
                vm.setVal(obj.value, obj.text);
            });
        },
        save(e){
            let self = this;
            this.$refs.form.validate(valid=> {
                if (!valid) {
                    e.loading = false;
                    return;
                }
                self.mdl.appId = self.app.appId;
                SysDevOpsManageApi.save(self.mdl).then(res=>{
                    if(res.success){
                        //重新加载
                        self.getAppDevOps();
                    }
                });
            })
        },
        runJenkins(){
            let self =this;
            this.$confirm({
                zIndex: 20000,
                title: this.$ti18('rxMsa.tipsInfo','提示信息'),
                content: '您确定要运行流水线吗?',
                okText: '确认',
                cancelText: self.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    SysJenkinsApi.runJobByName({jobName:self.mdl.jobName,builderId:self.mdl.jenkinsId});
                },
                onCancel() {
                }
            })
        },
        showJobDetails(){
            Util.open({
                component: SysPipelineDetails,
                curVm: this,
                zIndex:999999,
                max:true,
                title: '流水线明细',
                data: {
                    pipeline: {
                        url:this.mdl.jobUrl,
                        name:this.mdl.jobName,
                        builderId:this.mdl.jenkinsId,
                    }
                }
            },  function (action,data) {
                if(action!="ok") return;
            })
        },
        delById(){
            let self =this;
            this.$confirm({
                zIndex: 20000,
                title: this.$ti18('rxMsa.tipsInfo','提示信息'),
                content: '你确定要删除吗?',
                okText: self.$ti18('rxForm.ackBtn','确认'),
                cancelText: self.$ti18('rxForm.cancelBtn','取消'),
                onOk() {
                    SysDevOpsManageApi.del({ids: self.mdl.pkId}).then(res=>{
                        //重新加载
                        self.getAppDevOps();
                    });
                },
                onCancel() {
                }
            })
        }
    },
    watch: {
        "mdl.gitName": function (val) {
            if (!this.mdl.jobName && val) {
                //将取url的.git前的名字
                const parts = val.split('/');
                let gitName = parts[parts.length - 1].replace('.git', '');
                let time = moment().format('YYYYMMDD');
                this.mdl.jobName = this.app.clientCode + "-" + gitName + "-" + time;
            }
        }
    }
}
</script>

<style scoped>
.rx-input-butn-disabled ::v-deep .ant-input[disabled],
.rx-input-butn-disabled ::v-deep .ant-input[disabled]:hover{
    background-color: #f5f5f5;
}
* ::v-deep .ant-input[disabled]{
    color: rgba(0, 0, 0, 0.65);
}
</style>